@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

body {
    font-family: "Microsoft YaHei", "Microsoft YaHei", "Helvetica Neue", Arial,
        HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    background-color: $bodyBackground;
    margin: 0 auto;
}

.container {
    position: relative;
    height: 100%;
    width: px2rem(640);
    margin: 0 auto;
    background-color: transparent;

    .main-container {
        width: 80%;

        // 在横屏状态下的样式
        @media (orientation: landscape) {
            position: absolute;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
        }

        // 在竖屏状态下的样式
        @media (orientation: portrait) {
            position: absolute;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        background: #20212e;
        box-sizing: border-box;
        border-radius: px2rem(8);
    }
}
